<template id="input">
  <div class="container mt-3">
      <div class="columns">
        <div class="column is-one-quarter">
          <input
            class="input is-info"
            type="text"
            placeholder="这里请输入标题😎"
            v-model="todoText"
            @keyup.enter="addTodo"
            ref="addInput"
          >
        </div>
        <div class="column is-one-quarter">
          <input
            class="input is-info"
            type="text"
            placeholder="今日事今日毕🖖🏿"
            v-model="todoContent"
            @keyup.enter="addTodo"
            ref="addInput"
          >
        </div>
        <div class="column is-one-quarter">
          <button
            class="button is-link"
            @click="addTodo"
            >添加</button>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      todoText:'',
      todoContent:''
    }
  },
  methods: {
    addTodo() {
      this.$emit('add-todo', {
        title:this.todoText,
        content:this.todoContent
      })
      this.todoText = this.todoContent = ''
      this.$refs.addInput.focus()
    }
  }
}
</script>

<style>

</style>